<template>
    <div class='publish-comment-container'>
        <div class='title'>发布/回复</div>
        <div class='publish-comment-form'>
            <el-form ref='commentFormRef' :model='commentForm' :rules='rules'>
                <el-form-item prop='content'>
                    <el-input
                        ref='commentPublishIpt'
                        v-model='commentForm.content'
                        :disabled='!user.isLogin' show-word-limit maxlength='100'
                        placeholder='请输入评论内容'
                        type='textarea' @keydown.enter.prevent='sendCommentOrReply' />
                </el-form-item>
                <el-form-item class='btns'>
                    <el-button v-if='user.isLogin' plain type='primary' @click='sendCommentOrReply'>
                        发表/回复
                    </el-button>
                    <el-button v-else disabled plain type='primary' @click='sendCommentOrReply'>登录后可评论
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup lang='ts'>
/*请求参数定义*/
import { getCurrentInstance, reactive, toRefs, watch } from 'vue';
import useUserStore from '@/store/modules/user';
import { sendComment, sendSecondComment } from '@/api/business/comment';

const emits = defineEmits(['success', 'update:replyInfo']);
const props = defineProps({
    type: { type: String, default: '' },
    dataId: {
        type: Number,
        default: -1
    },
    replyInfo: {
        type: Object,
        default: null
    }
});
/*监听回复人变化*/
watch(() => props.replyInfo, (value) => {
    if (value?.nickName?.indexOf('@') !== -1) {
        commentForm.value.content = value?.nickName as string;
    }
    proxy.$refs['commentPublishIpt'].focus();
    console.log(value);
});
const { proxy } = getCurrentInstance();
const user = useUserStore();
const data = reactive({
    rules: {
        content: [{
            required: true, message: '评论内容不能为空!', trigger: 'blur'
        }]
    },
    commentForm: {
        content: '',
        dataId: -1,
        type: ''
    }
});
const { commentForm, rules } = toRefs(data);

/*评论/回复*/
const sendCommentOrReply = () => {
    proxy.$refs['commentFormRef'].validate(async(valid: any) => {

        commentForm.value.dataId = props.dataId || -1;
        if (commentForm.value.dataId === -1) return proxy.$modal.msgError('比赛Id不存在!');
        commentForm.value.type = props.type as string;
        if (!commentForm.value.type) return proxy.$modal.msgError('评论类型不存在!');
        /*如果没有艾特别人 说明不是回复*/
        if (commentForm.value.content.indexOf('@') === -1) {
            /*等待重置完*/
            await emits('update:replyInfo', {
                commentId: 0,
                nickName: commentForm.value.content
            });
        }
        if (valid) {
            const parentId = props.replyInfo.commentId;
            if (parentId) {
                const obj = {
                    parentId,
                    content: commentForm.value.content/*commentForm.value.content.replaceAll(replyInfo.value?.nickName as string, '')*/
                };
                sendSecondComment(obj).then(async (res) => {
                    proxy.$modal.msgSuccess('评论回复成功!');
                    emits('success', res.data);//成功回调
                    resetCommentForm();//重置表单
                });
            } else {
                sendComment(commentForm.value).then(() => {
                    proxy.$modal.msgSuccess('评论发布成功!');
                    emits('success', null);//成功回调
                    resetCommentForm();//重置表单
                });
            }
        }
    });
};
/*重置评论表单*/
const resetCommentForm = () => {
    commentForm.value = {
        type: props.type as string,
        dataId: props.dataId || -1,
        content: ''
    };
    emits('update:replyInfo', {});
    proxy.resetForm('commentFormRef');
};
</script>
<style scoped lang='scss'>
.publish-comment-container {
    flex: 1;
    overflow: hidden;
    border-radius: 6px;
    margin-top: 50px;
    background: #fff;
    min-height: 350px;
    position: sticky;
    top: 20%;

    .publish-comment-form {
        padding: 10px;

        .btns {
            margin-bottom: 0 !important;

            :deep(.el-form-item__content) {
                justify-content: flex-end;
            }
        }

        :deep(.el-textarea__inner) {
            background: #F2F6FC;
            box-shadow: none;
            resize: none;
            min-height: 200px !important;
            font-size: 16px;
        }
    }

    .title {
        padding: 17px 0;
        background: rgba(64, 158, 255, 0.8);
        font-size: 20px;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
    }
}
</style>
